<script setup>
/**
 * 重构Toast的loading效果
 * @Author <175588516@qq.com> 木木 
 * @Description Loading扩展
 * @Date 2023/11/20
 */
import { onMounted,ref, watch } from 'vue';
import $cache from '@/common/cache.js';
const emits = defineEmits(['update:show','cancel','canceled'])
const props = defineProps({
	show:{
		type	: Boolean,
		default	: false,
	},//显示状态
	applyTo:{
		type	: String,
		default	: '',
	},// dom渲染的节点位置  默认为当前位置 可选如#teleported #app等任意位置 不建议选择body,需要为body的都放入#teleported比较好
	mask:{
		type	: [Number,Boolean],
		default	: 0.2,
	}, // 遮罩透明度  // false为不使用遮罩 无遮罩时带穿透
	maskClosable:Boolean,//点击遮罩关闭窗口 默认false
	type:{
		type:String,
		default:'wait', //ballRotate 小圆球转圈  wait 灯条等待
	},
})
const showLoading = ref(props.show)
watch(()=>props.show,newVal=>showLoading.value=newVal)
const zIndex = ref(1050)
onMounted(()=>{
	let n = $cache.se('index',null,'_adminModalzIndex')||1050;
	if(zIndex.value<=n){
		zIndex.value=n++
		$cache.se('index',n,'_adminModalzIndex');
	}
})
const clickMask = ()=>{
	if(!props.maskClosable) return
	showLoading.value=false
	emits('update:show',showLoading.value)
	emits('cancel')
	emits('canceled')
}
</script>

<template>
	<teleport to="#teleported" :to="applyTo || '#teleported'" :disabled="!applyTo">
		<div class="loadingBox" :style="{zIndex}" v-if="showLoading">
			<div v-if="type=='wait'" class="round3">
				<div v-for="v in 3"></div>
			</div>
			<div class="loadBox" v-else-if="type=='ballRotate'">
				<div class="loaderContantBox"></div>
			</div>
			<div v-else>
				<slot></slot>
			</div>
			<div class="mask" @click="clickMask" :style="{opacity:mask}" v-if="mask"></div>
		</div>
		<div :="$attrs" style="display: none;"><!--警告屏蔽--></div>
	</teleport>
</template>

<style lang="less" scoped>
@size:70px;
.loadingBox {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
    justify-content: center;
	.mask{
		pointer-events: auto;
		// cursor: wait;
	}
	.loadBox{
		position: relative;
		z-index: 100;
	}
	.loadBox .loaderContantBox {
		color: var(--primary);
		font-size: @size;
		overflow: hidden;
		width: @size;
		height: @size;
		border-radius: 50%;
		transform: translateZ(0);
		animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
	}
	@keyframes loadBox {
		0% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		5%, 95% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		10%, 59% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
			-0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
			-0.297em -0.775em 0 -0.477em;
		}
		20% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
			-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
			-0.749em -0.34em 0 -0.477em;
		}
		38% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
			-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
			-0.82em -0.09em 0 -0.477em;
		}
		100% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
	}
	@keyframes round {
		0% {
			transform: rotate(0deg); /* 开始旋转 div 元素 */
		}
		100% {
			transform: rotate(360deg); /* 结束旋转 div 元素 */
		}
	}
}
// lisa1加载效果
.round3{
	@keyframes loading{
		0%{transform: scale(0.3);}
		100%{transform: scale(1.5);}
	}
	div{
		margin-right: 10px;
		width: 20px;
		height: 20px;
		display: inline-block;
		background: #57b9f8;
		border-radius: 50%;
		animation-name: loading;
		animation-duration: 1.2s;
		animation-timing-function: cubic-bezier(0.2, 0.65, 0.6, 0.7);
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-play-state: running;
		&:last-child{
			margin-right: 0;
		}
	}
	div:nth-child(1){
		animation-delay: 0;
	}
	div:nth-child(2){
		animation-delay: -0.4s;
	}
	div:nth-child(3){
		animation-delay: -0.8s;
	}
}
</style>